<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录页面</title>
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/blog_login.css">
</head>
<body>
<!-- 这是导航栏 -->
<div class="nav">
  <img src="image/logo2.jpg" alt="">
  <span>我的博客系统</span>
  <!-- 空白元素, 用来占位置 -->
  <div class="spacer"></div>
  <a href="blog_list.html">主页</a>
  <a href="blog_edit.html">写博客</a>
  <!-- 注销按钮没必要在登录页面展示 -->
  <!-- <a href="#">注销</a> -->
</div>
<div class="login-container">
  <form action="login" method="post">
    <div class="login-dialog">
      <h3>登录</h3>
      <div class="row">
        <span>用户名</span>
<!--        <input type="text" id="username">-->
<!--        使用form表单 要加上name属性-->
        <input type="text" id="username" name="username">
      </div>
      <div class="row">
        <span>密码</span>
<!--        <input type="password" id="password"-->
<!--        使用form表单 要加上name属性
            这里还需要注意就是我们使用form之前 要注意css或者js的样式可能会失效-->
        <input type="password" id="password" name="password">
      </div>
      <div class="row">
<!--        因为这里我们使用form表单来进行跳转就不能使用button了 应该使用submit
            如果使用button也可以 编写js代码就可以了 -->
        <!-- <button>提交</button> -->

<!--        这里使用form表单来实现跳转-->
<!--        原本是button的样式  但是因为我们使用了form表单 button的样式我们就不能再使用了
所以我们要重新调整样式 所以给blog_login.css中的表当内 的submit id添加属性(id="submit")
这样就可以使界面样式不会消失-->
        <input type="submit" id="submit" value="提交">
      </div>
    </div>
  </form>
</div>
</body>
</html>